<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html, body {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
<div id="myChart" class="chart1" style="width:100%; height:100%;"></div>
</body>
<script src="../js/echarts.min.js"></script>
<script src="../js/jquery.min.js"></script>
<script src="../js/china.js"></script>
<script>
    var chart1 = null;
    $(function () {
        chart1 = echarts.init($(".chart1").get(0));
    });
    var dataStyle = {
        normal: {
            label: {
                show: true,
                color: '#fff',
                fontSize: 18,
            },
            labelLine: {
                //smooth: 0.2,
                length: 40,
                length2: 40
            },
        }
    };

    var labelShow = {
        show: true,
        color: '#000',
        fontSize: 15,
        formatter: [
            '{d| {d}% }',
            '{b| {b} }'
        ].join('\n'),
        rich: {
            d: {
                fontSize: 15,
                color: '#000'
            },
            b: {
                fontSize: 18,
                color: '#000'
            },
        }
    };

    var placeHolderStyle = {
        normal: {
            color: 'rgba(0,0,0,0)',
            label: {
                show: false
            },
            labelLine: {
                show: false
            }
        },
        emphasis: {
            color: 'rgba(0,0,0,0)'
        }
    };
    setTimeout(function () {
        option = {
            title: {
                text: '',
                textStyle: {
                    fontSize: 25,
                    fontWeight: 'normal',
                    color: '#fff',
                },
                x: 'center'
            },
            color: ['#2078d1', '#8a00ec', '#ff00f3', '#fb0065', '#ff941b'],
            tooltip: {
                show: false,
                formatter: "{b} <br/> {c} ({d}%)"
            },
            angleAxis: {
                type: 'category',
                z: 10,
                axisLine: {
                    color: '#fff',
                    lineStyle: {
                        width: 10,
                        color: '#fff',
                    }
                },
            },
            radiusAxis: {
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: false,
                    color: '#000'
                },
                axisLine: {
                    show: false,
                    color: '#fff',
                    lineStyle: {
                        color: '#fff',
                    }
                },
                splitLine: {
                    color: '#000',
                    lineStyle: {
                        type: 'none',
                        // color: 'rgba(170,170,170,.5)',
                    }
                },

            },
            polar: {
                center: ['50%', '50%'],
                radius: 140,
            },
            legend: {
                bottom: '5%',
                textStyle: {
                    color: '#fff',
                },
                itemGap: 12,
                data: ['各类技术人员', '国家事业单位', '其他', '服务性人员', '商业工作人员', '农林牧渔劳动者']
            },
            series: [{
                name: 'Line 1',
                type: 'pie',
                color: '#4997fc',
                clockWise: false,
                radius: [80, 105],
                itemStyle: dataStyle,
                hoverAnimation: false,
                data: [{
                    value: 800,
                    name: '',
                    itemStyle: placeHolderStyle
                },
                    {
                        value: 400,
                        name: '各类技术人员',
                        label: labelShow,
                    },
                    {
                        value: 50,
                        name: '',
                        itemStyle: placeHolderStyle
                    }

                ]
            },
                {
                    name: 'Line 2',
                    type: 'pie',
                    color: '#4c6ffc',
                    clockWise: false,
                    radius: [70, 100],
                    itemStyle: dataStyle,
                    hoverAnimation: false,

                    data: [{
                        value: 250,
                        name: '',
                        itemStyle: placeHolderStyle
                    },
                        {
                            value: 70,
                            name: '国家事业单位',
                            label: labelShow,
                        },
                        {
                            value: 200,
                            name: '',
                            itemStyle: placeHolderStyle
                        }
                    ]
                },
                {
                    name: 'Line 3',
                    type: 'pie',
                    color: '#fec400',
                    clockWise: false,
                    hoverAnimation: false,
                    radius: [120, 125],
                    itemStyle: dataStyle,

                    data: [{
                        value: 130,
                        name: '',
                        itemStyle: placeHolderStyle
                    },
                        {
                            value: 100,
                            name: '其他',
                            label: labelShow,
                        },
                        {
                            value: 170,
                            name: '',
                            itemStyle: placeHolderStyle
                        }
                    ]
                },
                {
                    name: 'Line 4',
                    type: 'pie',
                    color: '#fca400',
                    clockWise: false,
                    hoverAnimation: false,
                    radius: [110, 125],
                    itemStyle: dataStyle,

                    data: [{
                        value: 40,
                        name: '',
                        itemStyle: placeHolderStyle
                    },
                        {
                            value: 90,
                            name: '服务性人员',
                            label: labelShow,
                        },
                        {
                            value: 230,
                            name: '',
                            itemStyle: placeHolderStyle
                        }
                    ]
                },
                {
                    name: 'Line 5',
                    type: 'pie',
                    clockWise: false,
                    color: '#fc7600',
                    hoverAnimation: false,
                    radius: [80, 100],
                    itemStyle: dataStyle,

                    data: [{
                        value: 0,
                        name: '',
                        itemStyle: placeHolderStyle
                    },
                        {
                            value: 40,
                            name: '商业工作人员',
                            label: labelShow,
                        },
                        {
                            value: 320,
                            name: '',
                            itemStyle: placeHolderStyle
                        }
                    ]
                },
                {
                    name: 'Line 6',
                    type: 'pie',
                    color: '#1cc27e',
                    clockWise: false,
                    radius: [60, 100],
                    itemStyle: dataStyle,
                    hoverAnimation: false,

                    data: [{
                        value: 380,
                        name: '',
                        itemStyle: placeHolderStyle
                    },
                        {
                            value: 100,
                            name: '农林牧渔劳动者',
                            label: labelShow,
                        },
                        {
                            value: 100,
                            name: '',
                            itemStyle: placeHolderStyle
                        }
                    ]
                },
                {
                    type: 'bar',
                    data: [0],
                    coordinateSystem: 'polar',
                    name: '',
                    stack: ''
                },

            ]
        };
        chart1.setOption(option);
    })
</script>
</html>
